<template>
  <view class="container">
    <view class="contain">
      <view class="contain_main">
        <view style="width: 100%;">
          <view class="withdraw_top">
            <text class="withdraw_top_l">转出金额</text>
            <view class="withdraw_top_r">
              <text>￥</text>
              <input class="input_style" v-model.trim="inputValue" type="text" :placeholder="'最多可转出'+ userInfo.nowMoney">
              <text style="color: #DF4B43;" @tap="changeAll">全部</text>
            </view>
          </view>
          <view class="bank_bottom" @tap="goWithdrawShow()">
            确定
          </view>
          <view style="font-size: 24rpx;color:#a9a4a4;margin-top: 10rpx;">余额满66元才可以发起提现到零钱</view>
          <view style="font-size: 24rpx;color:#a9a4a4;margin-top: 10rpx;">提现申请后添加工作人员微信查询进度</view>
        </view>
      </view>
    </view>
    <view class="contain_bottom">
      <view class="contain_list">
        <view class="content-box">
          <view
            class="list_title"
            :class="tabActive == index ? 'red' : ''"
            v-for="(item, index) in tablist"
            :key="index"
            @click="tabClick(index)"
          >
            {{ item }}
          </view>
        </view>
        <view v-if="tabActive == 1">
          <view class="list_item" v-for="(item, index) in list" :key="index">
            <view class="list_left">
              <view class="list_status" >{{returnName(item.operation)}}
              </view>
              <view class="list_time">{{item.createTime}}</view>
            </view>
            <view class="list_right">
              <view v-if="item.operation == 5 || item.operation == 6" class="list_right_top red">
                +{{item.number}}
              </view>
              <view v-else class="list_right_top green">
                -{{item.number}}
              </view>
              <view class="list_right_bottom" >
                剩余{{item.balance}}
              </view>
            </view>
          </view>
        </view>  
        <view v-if="tabActive == 0">
          <view class="list_item" v-for="(item, index) in list" :key="index">
            <view class="list_left">
              <view class="list_status" :style="{color:(item.status == 1? '#DF4B43':item.status == 0? '#FF6923': '')}">
                {{item.status == 0? '转出中': item.status == 1? '转出成功': item.status == 2? '转出失败':''}}{{ item.remark? '('+ item.remark + ')':'' }}
              </view>
              <view class="list_time">{{item.createTime}}</view>
            </view>
            <view class="list_right" :style="{color:(item.status == 1? '#DF4B43':item.status == 0? '#FF6923' :'')}">
              {{item.status == 1? '+': ''}}{{item.amount}}
            </view>
          </view>
        </view>  
        <uni-popup ref="kefupopup">
      <view class="buylist">
        <view style="text-align: center">
          <img style="width: 360rpx; height: 360rpx" show-menu-by-longpress="true" src="https://csqx.nangua.website/crmebimage/public/maintain/2024/01/16/db73e8240443453fbb44f2f1555beae90kbpeyi23p.jpeg" alt="" />
        </view>
        <view style="font-size: 24rpx;text-align: center;">
          查询转出进度长按加工作人员微信
        </view>
        <view class="btn" @click="closeKefu">关闭</view>
      </view>
    </uni-popup>
        <ListFooter :loadtitle="loadtitle"></ListFooter>
      </view>
    </view>
  </view>
</template>

<script>
import ListFooter from '../../components/listFooter/listFooter.vue';
import { yueBillList, yueExtractApply, yueExtractList } from '@/api/api.js'
import { mapGetters } from "vuex";
  export default {
    components: {ListFooter},
    computed: mapGetters(["userInfo"]),
    data() {
      return {
        tablist: [ '提现记录', '余额记录' ],
        inputValue: '', //提现金额
        list: [
        ], //提现记录
        loadtitle: '加载更多',
        limit: 20,
        page: 1,
        loading: false,
		  loadend: false,
      tabActive:0
      };
    },
    // （1 2兑换积分 3购买商品 4购买抽奖次数 5 红包中奖 6 订单对账）
    // 上拉加载
    onReachBottom() {
      this.page++
      if (this.tabActive == 0) {
        this.getApplyList()
      }
      if (this.tabActive == 1) {
        this.getList();
      }
    },
    onShow() {
       this.getApplyList()
    },
    methods: {
      returnName(operation) {
        if (operation ==1) {
          return '提现转出'
        }
        if (operation ==2) {
          return '兑换积分'
        }
        if (operation ==3) {
          return '购买商品'
        }
        if (operation ==4) {
          return '购买抽奖次数'
        }
        if (operation ==5) {
          return '红包中奖'
        }
        if (operation ==6) {
          return '订单对账'
        }
      },
      tabClick(index) {
        this.page = 1
        this.list = []
        this.loadend = false
        this.tabActive = index
        if (index ==0) {
          this.getApplyList()
        }
        if (index ==1) {
          this.getList()
        }
      },
      closeKefu() {
      this.$refs.kefupopup.close()
    },
      // 全部
      changeAll() {
        this.inputValue = this.userInfo.nowMoney
      },
      goWithdrawShow() {
        if (!this.inputValue) {
          return uni.showToast({
            title: '请输入转出金额',
            icon: 'none'
          })
        }
        if(parseFloat(this.inputValue) < 66) {
          return uni.showToast({
            title: '金额未达到转出要求',
            icon: 'none'
          })
        }
        uni.showModal({
          title: '提示',
          content:  `确定要转出${this.inputValue}元到零钱吗` ,
          confirmText: '确定',
          cancelText: '取消',
          success: res => {
            if (res.confirm) {
             this.confirmApply()
            } else {
            
            }
          }
        })
       
      },
      confirmApply() {
        yueExtractApply({
          amount: this.inputValue
        }).then(res => {
          this.tabActive = 0
          this.inputValue = ''
          this.$refs.kefupopup.open()
          this.tabClick(0)
          this.$store.dispatch("USERINFO");
        })
      },
      getApplyList() {
        if (this.loading)
                return;
            if (this.loadend)
                return;
            this.loading = true;
            this.loadtitle = "";
            let params = {
          page: this.page,
          limit: this.limit
        }
        // 提现列表
        yueExtractList(params).then(res => {
          uni.hideLoading()
          let list = res.data.list;
          let loadend = list.length < this.limit;
          this.list = this.list.concat(list)
          this.loadend = loadend;
          this.loading = false;
          this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
        })
      },
      // 获取余额列表
      getList() {
        if (this.loading)
                return;
            if (this.loadend)
                return;
            this.loading = true;
            this.loadtitle = "";
			uni.showLoading({
				title: '加载中...'
			})
        let params = {
          page: this.page,
          limit: this.limit
        }
        yueBillList(params).then(res => {
          uni.hideLoading()
        let list = res.data.list;
					let loadend = list.length < this.limit;
					this.list = this.list.concat(list)

					this.loadend = loadend;
					this.loading = false;
					this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
        }).catch(err => {
          uni.hideLoading()
          console.log(err);
        })
      }
    }

  }
</script>

<style scoped lang="scss">
  .red {
    color: #DF4B43!important
  }
  .green {
    color: #2A9F17!important;
  }
  .juice {
    color: #FF6923!important;
  }
  .content-box {
    display: flex;
    align-items: center;
    .list_title {
      flex: 1;
      text-align: center;
    }
    
  }
  .buylist {
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  width: 650rpx;
  width: 500rpx;
  .btn {
    border-radius: 10rpx;
    background: #df4b43;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 84rpx;
    color: #fff;
    font-size: 24rpx;
  }
}
  .container {
    .contain {
      position: relative;

      .contain_img {
        width: 100%;
        height: 527rpx;
      }

      .contain_tab {
        position: fixed;
        text-align: center;
        width: 100%;
        font-size: 32rpx;
        color: #FFF;

        .more_left {
          position: absolute;
          top: 10rpx;
          left: 30rpx;
          width: 22rpx;
          height: 22rpx;
          border-top: 4rpx solid #ffffff;
          border-right: 4rpx solid #ffffff;
          transform: rotate(-135deg);
        }
      }

      .contain_all {
        position: absolute;
        top: 210rpx;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 28rpx;
        color: #FFF;

        .contain_money {
          margin-top: 15rpx;
          font-size: 76rpx;
        }
      }

      .contain_main {
        display: flex;
        width: 690rpx;
        margin: 20rpx auto;
        padding: 33rpx 29rpx 40rpx;
        border-radius: 25rpx;
        background-color: #FFF;
        box-shadow: 0 8rpx 12rpx #c3c3c3;

        .withdraw_top {
          width: 100%;
          display: flex;
          align-items: center;

          // background-color: #ffff00;
          .withdraw_top_l {
            flex: 0 1 225rpx;
            font-size: 26rpx;
            padding-bottom: 20rpx;
            background-color: #fff;
          }

          .withdraw_top_r {
            flex: 1;
            display: flex;
            padding-bottom: 20rpx;
            border-bottom: 2rpx solid #F4F4F4;
            font-size: 28rpx;

            // background-color: #aa00ff;
            .input_style {
              font-size: 26rpx;
              width: 250rpx;
              padding: 0 50rpx 0 20rpx;
            }
          }
        }

        .bank_card {
          display: flex;
          align-items: center;
          padding: 25rpx 0;
          font-size: 26rpx;

          .no_select {
            display: inline-block;
            width: 26rpx;
            height: 26rpx;
            margin-right: 23rpx;
            border-radius: 50%;
            border: 2rpx solid #B3B3B3;
          }

          .select {
            position: relative;
            display: inline-block;
            width: 26rpx;
            height: 26rpx;
            margin-right: 23rpx;
            border-radius: 50%;
            background-color: #FF6923;

            &::after {
              content: "";
              position: absolute;
              left: 6rpx;
              top: 6rpx;
              width: 50%;
              height: 28%;
              border: 2rpx solid #fff;
              border-radius: 2rpx;
              border-top: none;
              border-right: none;
              background: transparent;
              transform: rotate(-45deg);
            }
          }

          .bank_name {
            margin-right: 10rpx;
          }
        }

        .new_bank {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .new_bank_l {
            display: flex;
            align-items: center;
            font-size: 26rpx;

            .new_bank_img {
              width: 52rpx;
              height: 52rpx;
              margin-right: 16rpx;
            }
          }

          .more_img {
            width: 12rpx;
            height: 12rpx;
            border-top: 2rpx solid #999999;
            border-right: 2rpx solid #999999;
            transform: rotate(45deg);
          }
        }

        .bank_bottom {
          width: 100%;
          margin-top: 39rpx;
          padding: 22rpx 0;
          text-align: center;
          background: #DF4B43;
          border-radius: 55rpx;
          font-size: 32rpx;
          color: #FFFFFF;
        }


        .main_tip {
          font-weight: 600;
          font-size: 28rpx;
        }

        .tip_content {
          padding: 13rpx 0 55rpx;
          font-size: 26rpx;
          color: #606060;
        }

        .main_bottom {
          text-align: center;
          padding-bottom: 40rpx;

          .bottom_btn {
            padding: 22rpx 72rpx;
            background: #FF6923;
            box-shadow: 0rpx 12rpx 47rpx 6rpx rgba(255, 127, 46, 0.39);
            border-radius: 55rpx;
            font-size: 32rpx;
            color: #FFF;
          }
        }

      }
    }

    .contain_bottom {
      height: 55vh;
      padding: 0 30rpx;

      .contain_tip {
        margin-bottom: 30rpx;
        font-weight: 600;
        font-size: 26rpx;
        color: red;

        .tip_body {
          font-weight: 400;
        }
      }

      .contain_list {
        margin-bottom: 50rpx;
        padding: 34rpx 30rpx;
        border-radius: 25rpx;
        background-color: #FFF;

        .list_title {
          padding-bottom: 10rpx;
          font-weight: 600;
          font-size: 28rpx;
        }

      
          .list_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22rpx 0;
            border-bottom: 2rpx solid #F4F4F4;
            font-weight: 400;

            .list_left {
              font-size: 26rpx;

              .list_status {
                margin-bottom: 5rpx;
              }

              .list_time {
                color: #606060;
              }
            }
            .list_right {
              display: flex;
              align-items: center;
              flex-direction: column;
              &_top {
                font-size: 26rpx;
              }
              &_bottom {
                font-size: 24rpx;
              }
            }
        }

        .no_data {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 80rpx;

          .no_img {
            width: 292rpx;
            height: 242rpx;
          }

          .no_txt {
            margin: 10rpx 0 30rpx;
            font-size: 26rpx;
            color: #606060;
          }
        }
      }
    }

    .pop_bg {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      padding: 0 30rpx;
      background: rgba(0, 0, 0, .2);
      z-index: 12;

      .popup_box1 {
        position: relative;
        width: 100%;
        padding: 0 40rpx;
        border-radius: 25rpx;
        background-color: #FFFFFF;
        transition-property: opacity;
        transition-duration: 0.3s;

        .popup_main {
          width: 100%;
          height: 460rpx;

          .main_top {
            font-size: 40rpx;
            text-align: center;
            margin-top: 30rpx;
          }

          .main_box {
            // overflow: hidden;
            // overflow-y: auto;
            // height: 220rpx;
            padding: 24rpx 0;

            .main_box_top {
              font-size: 30rpx;
              color: #FF6923;
            }

            .main_item {
              display: flex;
              margin-top: 16rpx;
              font-size: 26rpx;

              .main_item_l {
                flex: 0 1 180rpx;
                color: #1E1E1E;
              }

              .main_item_r {
                flex: 1;
                color: #606060;
              }
            }

          }


        }

        .popup_bottom {
          display: flex;
          position: absolute;
          width: 100%;
          bottom: 0;
          left: 0;

          .btn_style {
            flex: 1;
            padding: 22rpx 0;
            text-align: center;
            color: #FFFFFF;
          }

          .cancel_btn {
            border-radius: 0rpx 0rpx 0rpx 25rpx;
            background: #FFB048;
          }

          .query_btn {
            border-radius: 0rpx 0rpx 25rpx 0rpx;
            background: #FF6923;
          }
        }
      }
    }

  }
</style>